import React, {Component} from "react";
import {Form, Input, Modal, Button, Radio, Spin} from "antd";
import {openNotificationWithIcon} from "utils/comm";
import styles from "./ApprovalForm.less";

const {TextArea} = Input;

const formItemLayout = {
  labelCol: {span: 24},
  wrapperCol: {span: 24},
};

@Form.create()
class ApprovalForm extends Component {
  constructor(props) {
    super(props);
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
  }

  componentDidMount() {
    const { form, mustExpress, comment } = this.props;
    if (!(mustExpress && comment !== 'end')) { 
      form.setFieldsValue({
        comment: '通过',
      });
    }
  }

  handleOk = () => {
    const {form, onCancel, dispatch, taskId, comment, getList, uuid, processInstanceId} = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      const renderApi = () => {
        switch (values.approval || comment) {
          case 'handle':
            return {
              type: "FlowHandle/handleWithClaim",
              payload: {
                taskId,
                variables: {"approval": "pass"},
                formId: uuid,
                ...values,
              },
            }
          case 'rollback':
            return {
              type: "FlowHandle/handleWithClaim",
              payload: {
                taskId,
                variables: {"approval": "reject"},
                formId: uuid,
                ...values,
              },
            }
          case 'end':
            return {
              type: "FlowHandle/terminateProcessInstance",
              payload: {
                workItemId: taskId,
                processInstanceId,
                participantId: sessionStorage.getItem("USER_CODE"),
                ...values,
              },
            }
          default:
            return {
              type: "FlowHandle/handleWithClaim",
              payload: {
                taskId,
                formId: uuid,
                ...values,
              },
            }
        }
      }
      dispatch({
        type: renderApi().type,
        payload: renderApi().payload,
      }).then(({ errCode, errMsg }) => {
        if (errCode === 0) {
          onCancel();
          if (comment === 'end') {
            this.openNotificationWithIcon("success", "", `否决成功`);
          } else {
            this.openNotificationWithIcon("success", "", `提交成功`);
          }
          if (getList instanceof Function) {
            getList();
          }
        } else {
          this.openNotificationWithIcon("error", "", errMsg);
        }
      });
    });
  };

  onChange = e => {
    const { form } = this.props;
    form.setFieldsValue({
      comment: `${e.target.value === 'handle' ? '通过' : ''}`,
    });
  };

  render() {
    const { form, onCancel, visible, confirmLoading, mustExpress, comment } = this.props;
    const { getFieldDecorator } = form;
    const radioStyle = {
      height: '30px',
      lineHeight: '30px',
    };

    return (
      <Modal
        title="审批意见"
        visible={visible}
        onOk={this.handleOk}
        onCancel={() => onCancel(false)}
        width="582px"
        className={styles.root}
        centered
        closable={false}
        maskClosable={false}
        destroyOnClose
        hideRequiredMark
        labelAlign="left"
        confirmLoading={confirmLoading}
        footer={[
          <Button
            loading={confirmLoading}
            key="ok"
            type="primary"
            onClick={this.handleOk}
          >
            确定
          </Button>,
          <Button
            key="back"
            onClick={() => onCancel(false)}
          >
            取消
          </Button>,
        ]}
      >
        <Spin spinning={confirmLoading}>
          <Form>
            {mustExpress && comment!== 'end' ? (
              <Form.Item label="">
                {getFieldDecorator("approval", {
                  rules: [
                    {required: true, message: "请选择是否同意"},
                  ],
                })(
                  <Radio.Group onChange={this.onChange}>
                    <Radio style={radioStyle} value="handle">同意</Radio>
                    {/* <Tooltip placement="topLeft" title='同意流程'>
                      <Icon
                        style={{cursor: "pointer", marginRight: 20, marginLeft: -10}}
                        theme="filled"
                        type="question-circle"
                      />
                    </Tooltip> */}
                    <Radio style={radioStyle} value="rollback">不同意</Radio>
                    {/* <Tooltip placement="topLeft" title='不同意流程'>
                      <Icon
                        style={{cursor: "pointer", marginRight: 20, marginLeft: -10}}
                        theme="filled"
                        type="question-circle"
                      />
                    </Tooltip> */}
                    {/* <Radio style={radioStyle} value="end">拒绝</Radio>
                    <Tooltip placement="topLeft" title='终止流程'>
                      <Icon
                        style={{cursor: "pointer", marginLeft: -10}}
                        theme="filled"
                        type="question-circle"
                      />
                    </Tooltip> */}
                  </Radio.Group>
                )}
              </Form.Item>
            ) : null}
            <div>
              <Form.Item label="" {...formItemLayout}>
                {getFieldDecorator("comment", {
                  rules: [
                    {max: 1000, message: "请不要超过1000个字符"},
                    {required: false, message: "请输入审批意见"},
                  ],
                })(<TextArea placeholder="请输入审批意见，最大限制在1000个字数内" rows={5} />)}
              </Form.Item>
            </div>
          </Form>
        </Spin>
      </Modal>
    );
  }
}

export default ApprovalForm;
